<template>
  <div class="grid grid-cols-4 gap-y-[12px] py-[12px] px-[5px] bg-[#ededed]">
    <div class="flex-1" v-for="item in state.list" @click="handleGameBtnItem(item)">
      <div class="flex flex-col justify-center items-center">
        <div class="w-[50px] h-[50px] flex justify-center items-center rounded-[15px]">
          <svg-icon class="w-[26px] h-[26px]" :name="item.icon" />
        </div>
        <div class="h-[28px] flex justify-center items-center text-[12px]">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { GameBtnType } from "@/enums";

type ListItem = {
  name: string;
  type: GameBtnType;
  link: string;
  icon: string;
};

const router = useRouter();
const state = reactive({
  list: <ListItem[]>[
    {
      name: "申请管理",
      type: GameBtnType.link,
      link: "/admin/apply/updown",
      icon: "more-apply"
    },
    {
      name: "发红包",
      type: GameBtnType.link,
      link: "/admin/main/send-red",
      icon: "more-red"
    },
    {
      name: "用户列表",
      type: GameBtnType.link,
      link: "/admin/user/member",
      icon: "more-user"
    },
    {
      name: "游戏数据",
      type: GameBtnType.link,
      link: "/admin/main/data",
      icon: "more-data"
    },
    {
      name: "总报表",
      type: GameBtnType.link,
      link: "/admin/report/total",
      icon: "more-report-total"
    },
    {
      name: "用户报表",
      type: GameBtnType.link,
      link: "/admin/report/user",
      icon: "more-report-user"
    },
    {
      name: "未结报表",
      type: GameBtnType.link,
      link: "/admin/report/unsettled",
      icon: "more-report-unsettled"
    },
    {
      name: "现场监控",
      type: GameBtnType.link,
      link: "/admin/monitor",
      icon: "more-monitor"
    }
  ]
});
// 点击item
const handleGameBtnItem = (item: ListItem) => {
  if (item.type == GameBtnType.link) {
    router.push(item.link);
  }
};
</script>
